import React, { Component } from 'react';
import "../styles/login.css";
import { user_login, user_register } from "../api/index";
class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            phone: '15117136429', pass: '', agree: false,
        }
    }
    handleChange(e) {
        // console.log(e.target);
        // console.log(e.target.name);
        // console.log(e.target.type);
        // console.log(e.target.checked);
        this.setState({
            // phone:e.target.value
            // 变量  [e.target.name]:[]json的键值对的书写形式
            [e.target.name]: e.target.type == 'checkbox' ? e.target.checked : e.target.value
        })
    }
    login() {
        console.log(this.state);
        if (this.state.agree) {
            //发起登陆请求
            user_login(this.state).then((res) => {
                console.log(res.data);
                localStorage.setItem('token', res.data.token)
                localStorage.setItem('id',res.data.userinfo.id)
                this.props.history.push('/index/Hom')
            })
        } else {
            alert('请先勾选用户登陆协议!');
        }
    }
    register() {
        // console.log(this.state);
        if (this.state.agree) {
            //发起登陆请求
            user_register(this.state).then((res) => {
                console.log(res.data);
            
            })
        } else {
            alert('请先勾选用户登陆协议!');
        }
    }
    render() {
        // 表单元素不受当前组件状态的控制,这样的表单元素叫做非受控组件
        // 表单元素处于一个组件状态,希望组件和表单处于一个双向绑定的结果

        return (
            <div className='login'>
                <div className='title'>登录页 </div>
                <div className='block'>
                    {/* 这样绑定之后组件间的this.state.value的值是什么value的值就是什么  想拿到输入框最新的值需要获取dom对象,就要拿到e事件*/}
                    <input type="text" name="phone" placeholder='输入电话号码'
                        value={this.state.phone}
                        onChange={(e) => { this.handleChange(e) }} />
                </div>
                <div className='block'>
                    <input type="text" name='pass' placeholder='输入密码'
                        value={this.state.pass}
                        onChange={(e) => { this.handleChange(e) }} />
                </div>
                <div className='block_check' >
                    <input type="checkbox" name='agree'
                        checked={this.state.agree}
                        onChange={(e) => { this.handleChange(e) }} />勾选用户协议
                </div>
                <div className='block block_button' >
                    <input type="button" value="登陆"
                        disabled={/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(this.state.phone)
                            && /^\S*(?=\S{6,})\S*$/.test(this.state.pass) ? false : true
                        }
                        onClick={() => { this.login() }} />
                </div>
                <div className='block block_button'>
                    <input type="button" value="注册"
                        onClick={() => { this.register() }} />
                </div>
            </div>
        )
    }
}

export default Login;